<template>
  <div>
    <sky-card-panel title="标题" subTitle='标题描述'>
      <div slot="header-right">
        <sky-button type="primary">操作</sky-button>
        <sky-button-group btntitle="更多" align="left">
          <sky-button isIconShow iconClass='icon_add'>新增</sky-button>
          <sky-button isIconShow iconClass='icon_edit'>编辑</sky-button>
          <sky-button isIconShow iconClass='icon_delete'>删除</sky-button>
          <sky-button isIconShow iconClass='icon_import'>导入</sky-button>
          <sky-button isIconShow iconClass='icon_export'>导出</sky-button>
          <sky-button isIconShow iconClass='icon_download'>下载</sky-button>
        </sky-button-group>
      </div>
      <div slot="main" class="containter-form">
        内容...
        <div class="CardPanelLine"></div>
        内容...
        <div class="CardPanelLine"></div>
        内容...
      </div>
    </sky-card-panel>

    <SkyHiddenPanel title="代码">

      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
          <code class="html">
              卡片容器
              
             &lt;sky-card-panel title="标题" subTitle='标题描述'&gt;
              &lt;div slot="header-right"&gt;
                &lt;sky-button type="primary"&gt;操作&lt;/sky-button&gt;
                &lt;sky-button-group btntitle="更多" align="left"&gt;
                      &lt;sky-button isIconShow iconClass='icon_add'&gt;新增&lt;/sky-button&gt;
                      &lt;sky-button isIconShow iconClass='icon_edit'&gt;编辑&lt;/sky-button&gt;
                      &lt;sky-button isIconShow iconClass='icon_delete'&gt;删除&lt;/sky-button&gt;
                      &lt;sky-button isIconShow iconClass='icon_import'&gt;导入&lt;/sky-button&gt;
                      &lt;sky-button isIconShow iconClass='icon_export'&gt;导出&lt;/sky-button&gt;
                      &lt;sky-button isIconShow iconClass='icon_download'&gt;下载&lt;/sky-button&gt;
                &lt;/sky-button-group&gt;
              &lt;/div&gt;
              &lt;div slot="main"  class="containter-form"&gt;
                内容...
                &lt;div class="CardPanelLine"&gt;&lt;/div&gt;
                内容...
                &lt;div class="CardPanelLine"&gt;&lt;/div&gt;
                内容...
              &lt;/div&gt;
            &lt;/sky-card-panel&gt;
                      
          </code>
      </pre>
      </div>
    </SkyHiddenPanel>

  </div>
</template>

<script>
  export default {
    data () {
      return {

      }
    }
  }
</script>

<style lang="scss" scoped>
</style>